﻿<!DOCTYPE html>
<!--[if IE 8]> <html lang="en" class="ie8 no-js"> <![endif]-->
<!--[if IE 9]> <html lang="en" class="ie9 no-js"> <![endif]-->
<!--[if !IE]><!-->
<html lang="en">
    <!--<![endif]-->
    <!-- BEGIN HEAD -->

    <head>
        <meta charset="utf-8" />
        <title>SuperUI前端框架</title>
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta content="width=device-width, initial-scale=1" name="viewport" />
        <meta content="" name="description" />
        <meta content="" name="author" />

        <!-- Bootstrap 3.3.6 -->
        <link rel="stylesheet" href="../content/ui/global/bootstrap/css/bootstrap.min.css">
        <!-- Font Awesome -->
        <link href="../content/ui/global/font-awesome/css/font-awesome.css" rel="stylesheet" />
        <!-- Theme style -->
        <link rel="stylesheet" href="../content/adminlte/dist/css/AdminLTE.css">
        <link rel="stylesheet" href="../content/adminlte/dist/css/skins/_all-skins.min.css">
        <link href="../content/min/css/supershopui.common.min.css" rel="stylesheet"/>
        <link href="../content/plugins/bootstrap-table/bootstrap-table.css" rel="stylesheet" />
        </head>
    <body>
        <section class="content-header">
            <h1>
               简单表格
                <small>preview of simple tables</small>
            </h1>
            <ol class="breadcrumb">
                <li><a href="#"><i class="fa fa-dashboard"></i> Home</a></li>
                <li><a href="#">Tables</a></li>
                <li class="active">Simple</li>
            </ol>
        </section>
        <!-- Main content -->
    <section class="content">

        <div class="row">
            <div class="col-md-6">
                <!-- BEGIN SAMPLE TABLE PORTLET-->
                <div class="box">
                    <div class="box-header with-border">
                        <h3 class="box-title">基本表格</h3>
                    </div>
                    <div class="box-body">

                        <table class="table-scrollable table table-hover  table-bordered" id="table"
                               data-toggle="table"
                               data-pagination="true"
                               data-search="true"
                               data-advanced-search="true"
                               data-id-table="advancedTable"
                               data-url="json/user.json">
                            <thead>
                                <tr>
                                    <th data-checkbox="true"></th>
                                    <th data-field="id" data-sortable="true">Id</th>
                                    <th data-field="lastname" data-sortable="true">姓</th>
                                    <th data-field="username" data-sortable="true" data-formatter="nameFormatter">用户名</th>
                                    <th data-field="state" data-sortable="true" data-formatter="stateFormatter">状态</th>
                                </tr>
                            </thead>
                        </table>

                    </div>
                </div>
            </div>
            <!-- END SAMPLE TABLE PORTLET-->
            <div class="col-md-6">
                <!-- BEGIN SAMPLE TABLE PORTLET-->
                <div class="box">
                    <div class="box-header with-border">
                        <h3 class="box-title">带条纹表格</h3>
                      
                    </div>
                    <div class="box-body">
                        <div class="table-scrollable">
                            <table class="table-striped table-hover table-bordered" id="table"
                                   data-toggle="table"
                                   data-pagination="true"
                                   data-search="true"
                                   data-advanced-search="true"
                                   data-id-table="advancedTable"
                                   data-url="json/user.json">
                                <thead>
                                    <tr>
                                        <th data-checkbox="true"></th>
                                        <th data-field="id" data-sortable="true">Id</th>
                                        <th data-field="lastname" data-sortable="true">姓</th>
                                        <th data-field="username" data-sortable="true" data-formatter="nameFormatter">用户名</th>
                                        <th data-field="state" data-sortable="true" data-formatter="stateFormatter">状态</th>
                                    </tr>
                                </thead>
                            </table>
                        </div>
                    </div>
                </div>
                <!-- END SAMPLE TABLE PORTLET-->
            </div>

        </div>
        <div class="row">
            <div class="col-md-6">
                <!-- BEGIN CONDENSED TABLE PORTLET-->
                <div class="box">
                    <div class="box-header with-border">
                        <h3 class="box-title">压缩表格</h3>

                    </div>
                    <div class="box-body">
                        <div class="table-scrollable">

                            <table class="table-striped table-condensed table-hover table-bordered" id="table"
                                   data-toggle="table"
                                   data-pagination="true"
                                   data-search="true"
                                   data-advanced-search="true"
                                   data-id-table="advancedTable"
                                   data-url="json/user.json">
                                <thead>
                                    <tr>
                                        <th data-checkbox="true"></th>
                                        <th data-field="id" data-sortable="true">Id</th>
                                        <th data-field="lastname" data-sortable="true">姓</th>
                                        <th data-field="username" data-sortable="true" data-formatter="nameFormatter">用户名</th>
                                        <th data-field="state" data-sortable="true" data-formatter="stateFormatter">状态</th>
                                    </tr>
                                </thead>
                            </table>
                        </div>
                    </div>
                </div>
                <!-- END CONDENSED TABLE PORTLET-->
            </div>
            <div class="col-md-6">
                <!-- BEGIN CONDENSED TABLE PORTLET-->
                <div class="box">
                    <div class="box-header with-border">
                        <h3 class="box-title">浅色背景表格</h3>
                    </div>
                    <div class="box-body">
                        <div class="table-scrollable">

                            <table class="table-striped table-light table-hover table-bordered" id="table"
                                   data-toggle="table"
                                   data-pagination="true"
                                   data-search="true"
                                   data-advanced-search="true"
                                   data-id-table="advancedTable"
                                   data-url="json/user.json">
                                <thead>
                                    <tr>
                                        <th data-checkbox="true"></th>
                                        <th data-field="id" data-sortable="true">Id</th>
                                        <th data-field="lastname" data-sortable="true">姓</th>
                                        <th data-field="username" data-sortable="true" data-formatter="nameFormatter">用户名</th>
                                        <th data-field="state" data-sortable="true" data-formatter="stateFormatter">状态</th>
                                    </tr>
                                </thead>
                            </table>
                        </div>
                    </div>
                </div>
                <!-- END CONDENSED TABLE PORTLET-->
            </div>
        </div>

        <div class="row">
            <div class="col-md-6">
                <!-- BEGIN SAMPLE TABLE PORTLET-->
                <div class="box">
                    <div class="box-header with-border">
                        <h3 class="box-title">带背景行</h3>
                    </div>
                    <div class="box-body">
                        <table class="table-scrollable table table-hover" id="table"
                               data-toggle="table"
                               data-pagination="true"
                               data-search="true"
                               data-advanced-search="true"
                               data-id-table="advancedTable"
                               data-url="json/user.json" data-row-style="rowStyle">
                            <thead>
                                <tr>
                                    <th data-checkbox="true"></th>
                                    <th data-field="id" data-sortable="true">Id</th>
                                    <th data-field="lastname" data-sortable="true">姓</th>
                                    <th data-field="username" data-sortable="true" data-formatter="nameFormatter">用户名</th>
                                    <th data-field="state" data-sortable="true" data-formatter="stateFormatter">状态</th>
                                </tr>
                            </thead>
                        </table>
                    </div>
                </div>
                <!-- END SAMPLE TABLE PORTLET-->
            </div>
          
        </div>
    </section>
        <script src="../content/ui/global/jQuery/jquery.min.js"></script>
        <!-- Bootstrap 3.3.6 -->

        <script src="../content/ui/global/bootstrap/js/bootstrap.min.js"></script>
        <script src="../content/min/js/supershopui.common.js"></script>
        <script src="../content/plugins/bootstrap-table/bootstrap-table.js"></script>
        <script src="../content/plugins/bootstrap-table/locale/bootstrap-table-zh-CN.js"></script>
    </body>
<script>
    function nameFormatter(value, row) {
        var icon = row.id % 2 === 0 ? 'glyphicon-star' : 'glyphicon-star-empty'

        return '<i class="glyphicon ' + icon + '"></i> ' + value;
    }

    function stateFormatter(value, row) {
      
        if (row.state === "1") {
            return ' <span class="label label-sm label-success"> 在职 </span>';
        }
        else if (row.state == "2") {
            return ' <span class="label label-sm label-warning"> 实习 </span>';
        }
        else {
            return '<span class="label label-sm label-danger"> 离职 </span>';
        }
      
    }
    function rowStyle(row, index) {
        var classes = ['active', 'success', 'info', 'warning', 'danger'];

        if (index % 2 === 0 && index / 2 < classes.length) {
            return {
                classes: classes[index / 2]
            };
        }
        return {};
    }
</script>
</html>